<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>生命周期钩子函数</h1>
        <p>{{age}}</p>
        <input type="text" v-model="age">
        <p>v-model绑定输入框，有两种情况：设置输入框的选中状态，获取输入框的值</p>
        <p>VUE的设计模式MVVM，model-view-ViewModel</p>
        <p>性别</p>
        <label for="sex">男</label>
        <input name="sex" type="radio"  value="male" v-model="val1">
        <label for="sex">女</label>
        <input name="sex" type="radio" value="female" v-model="val1">
        <label for="sex">保密</label>
        <input name="sex" type="radio" value="none" v-model="val1">
        <p>你的性别是：{{val1}}</p>
        <p>你的爱好：</p>
        <label for="">唱</label>
        <input type="checkbox" value="sing" name="hobby" v-model="val2">
        <label for="">跳</label>
        <input type="checkbox" value="dance" name="hobby" v-model="val2">
        <label for="">rap</label>
        <input type="checkbox" value="rap" name="hobby" v-model="val2">
        <label for="">打篮球</label>
        <input type="checkbox" value="basketball" name="hobby" v-model="val2">
        <p>你的爱好是：{{val2}}</p>
        <p>你的家乡</p>
        <select name="" id="" v-model="val3">
            <option value="1">长沙</option>
            <option value="2">株洲</option>
            <option value="3">常德</option>
            <option value="4">陇南</option>
        </select>
        <p>你的家乡是：{{val3}}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        let vm = new Vue({
            el:'#app',
            data:{
                age:18,
                //性别
                val1:'none',
                val2:['dance'],
                val3:'4'
            },
            /*beforeCreat(){
                console.log(this.$data);
                console.log(this.$el);
                console.log('beforeCreate--1');
                },
            created(){

            },
            beforeMount(){

            },
            mounted(){

            },*/

        })
    </script>
</body>
</html>